<template>
    <div class="login-container">
        <el-form :model="userForm" ref="userForm" :rules="userFormRules">
            <el-form-item>
                <el-input v-model.trim="userForm.username"
                          placeholder="OA账号/NGOC外协账号"
                          auto-complete="off"
                          @keyup.enter.native="onLogin()"></el-input>
            </el-form-item>
            <el-form-item class="password-input">
                <el-input :maxlength="20" type="password"
                          placeholder="登入密码"
                          v-model.trim="userForm.password"
                          auto-complete="off"
                          @keyup.enter.native="onLogin()"></el-input>
                <!-- <p class="capital-key-tips">大写锁定已开启</p> -->
            </el-form-item>
            <el-form-item>
                <el-input :maxlength="10" type="text"
                          placeholder="验证码"
                          v-model.trim="userForm.verify"
                          auto-complete="off"
                          @keyup.enter.native="onLogin()" class="verify-code">
                    <img :src="srcUrl" id="verify-dom" alt=" " slot="suffix"
                         style="width: 80px; height: 28px; margin-right: 2px;cursor: pointer"
                         @click="changPin">
                </el-input>
            </el-form-item>
            <el-button @click="onLogin">登 录</el-button>
        </el-form>
    </div>
</template>

<script>
 import { userLogin, getLoginImage } from '@/api/api';
    export default {
        name: "Login",
        data () {
            return {
                srcUrl: '',
                userForm: {
                    username: '',
                    password: '',
                    verify: ''
                },
                userFormRules: {
                    username: [{required: true, message: "请输入用户名", trigger: 'change'}],
                    password: [{required: true, message: "请输入密码", trigger: 'change'}],
                    verify: [{required: true, message: "请输入验证码", trigger: 'change'}]
                }
               
            }
        },
        mounted () {
            
        },
        methods: {
            onLogin () {
                   this.$refs.userForm.validate((valid) => {
                        if (valid) {
                            userLogin(this.userForm).then(data => {
                                // console.log(data)
                                // sessionStorage.setItem('user', JSON.stringify(data.shopDispatcher));
                                // sessionStorage.setItem('jwt', data.jwt);
                                // this.$router.push({
                                //     path: '/index'
                                // });
                            })
                        } else {
                            return false;
                        }
            });
            },
            changPin () {
                 getLoginImage({dataType: {responseType: 'blob'}}).then(res => {
                    let url = this.arrayBufferToBase64(res.data);
                    sessionStorage.setItem('ng', res.headers.sessionid);
                    this.srcUrl = `data:image/jpeg;base64,${url}`;
                }).catch(e => {
                })
            },
              arrayBufferToBase64(buffer) {
                let binary = '';
                let bytes = new Uint8Array(buffer);
                let len = bytes.byteLength;
                for (let i = 0; i < len; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                return window.btoa(binary);
            },
        }
    }
</script>

<style lang="scss">
    .login-container {
        
    }
</style>
